<html>
<head>
	<meta charset="UTF-8">
	<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">
	<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache">
	<METAHTTP-EQUIV="Expires"CONTENT="0">
	<link rel="stylesheet" href="css/bootstrap.css">
	<!-- <link rel="stylesheet" href="css/colorpicker.min.css"> -->
	<link rel="stylesheet" href="css/spectrum.css">
	<script src="js/jquery.js"></script>
	<script src="js/angular.js"></script>
	<!-- <script src="js/bootstrap-colorpicker-module.min.js"></script> -->
	<script src="js/spectrum.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
	<br />
	<div id="show" ng-app="myApp" ng-controller="myCtrl">
		<div>
			<a href="datalist.html">查询列表</a>
			<h3 style="position: absolute;top: 0px;left: 40%;">{{name}}</h3>
			<div style="text-align: right;"><iframe src="header.html" style="position: absolute;top: 15px;right: 10px;border: none;width:150px;height:40px"></iframe></div>
		</div>
		<br />
		<div class="panel panel-success"  style="width:70%;float:left">
			<div class="panel-heading">
				<h3 class="panel-title">模板定时消息设置</h3>
			</div>
			<div class="panel-body" 
				style="width: 50%; text; margin-left: 25%" >
				<div class="form-group">
					<label for="name">微信模板消息ID</label> <input type="text"
						class="form-control"  ng-model="templateId"/>
				</div>
				<div class="form-group">
					<label for="name">模板名称</label> <input type="text"
						class="form-control"  ng-model="templateName"/>
				</div>
				<div class="form-group">
					<label for="name">模板内容(微信公众号模板内容)</label> <textarea rows="5" cols="65" type="text"
						class="form-control"  ng-model="templateContent" ng-blur="contentChange()" placeholder="{{templateContentDemo}}"></textarea>
				</div>
				<div class="form-group">
					<label for="name">first</label> <input type="text"
						class="form-control" ng-model="first" /> <input
						type="text" class="form-control" value="{{color}}" id="colorValue"
						style="width: 80%; float: left" /> <input  type="text" 
						 id='color'  class="form-control" 
						style="width: 20%;" />
				</div>
				<div class="form-group">
					<label for="name">{{keyword1Label}}</label> <input type="text"
						class="form-control"  ng-model="keyword1" /> <input  type="text" 
						class="form-control" value="{{color1}}" id="color1Value" 
						style="width: 80%; float: left" /> <input type="text" 
						class="form-control"  id="color1"
						style="width: 20%;" />
				</div>
				<div class="form-group">
					<label for="name">{{keyword2Label}}</label> <input type="text"
						class="form-control" ng-model="keyword2" /> <input 
						type="text" class="form-control" name="color2" value="{{color2}}" id="color2Value"
						style="width: 80%; float: left" /> <input  type="text"
						class="form-control"  id="color2"
						style="width: 20%;" />
				</div>
				<div class="form-group">
					<label for="name">{{keyword3Label}}</label> <input type="text"
						class="form-control"  ng-model="keyword3" /> <input 
						type="text" class="form-control" name="color3" value="{{color3}}" id="color3Value"
						style="width: 80%; float: left" /> <input  type="text"
						class="form-control"  id="color3"
						style="width: 20%;" />
				</div>
				<div class="form-group">
					<label for="name">{{keyword4Label}}</label> <input type="text"
						class="form-control"  ng-model="keyword4" /> <input
						type="text" class="form-control" name="color4" value="{{color4}}" id="color4Value"
						style="width: 80%; float: left" /> <input  type="text"
						class="form-control"   id="color4"
						style="width: 20%;" />
				</div>
				<div class="form-group">
					<label for="name">{{keyword5Label}}</label> <input type="text" 
						class="form-control" ng-model="keyword5" /> <input
						type="text" class="form-control" value="{{color5}}" id="color5Value"
						style="width: 80%; float: left" /> <input  type="text"
						class="form-control"   id="color5"
						style="width: 20%;" />
				</div>
				<div class="form-group">
					<label for="name">remark</label> <input type="text"
						class="form-control" ng-model="remark" /> <input
						type="text" class="form-control" name="color6" value="{{color6}}" id="color6Value"
						style="width: 80%; float: left" /> <input  type="text"
						class="form-control"   id="color6"
						style="width: 20%;" />
				</div>

				<div class="form-group">
					<label for="name">发送时间</label> <input type="datetime-local" min="{{startDate}}" max="{{endDate}}"
						class="form-control"  ng-model="sendDate" />
				</div>
				<div class="form-group">
					<label for="name">跳转URL</label> <input type="text"
						class="form-control"  ng-model="clickurl"/>
				</div>
				<div class="form-group" id="topcolorForm">
					<label for="name">字体颜色</label> <input type="text"
						style="visibility: hidden;" /> <input type="text"
						class="form-control" value="{{topcolor}}" style="width: 80%; float: left" id="topcolorValue"
						style="width: 80%" /> <input type="text" class="form-control" 
						id="topcolor" style="width: 20%;float:left" />
				</div>
				<div class="form-group">
					<label for="name">备注</label>
					<textarea rows="3" cols="65" class="form-control" ng-model="note">
						
					</textarea>
				</div>
				<br />
				<div style="text-align: right;">
					<input type="button" class="btn btn-primary" ng-click="search()"
							value="预览">
					<input type="button" class="btn btn-primary" ng-click="submit()"
						value="提交"></div>
				<input type="hidden" ng-model="createTime"/>
				<input type="hidden" ng-model="id"/>
			</div>
			
		</div>

		<div class="panel panel-success" style="width:28%;float:left">
			<div class="panel-heading">
				<h3 class="panel-title">预览人员设置</h3>
			</div>
			<div class="panel-body" 
				style="width: 50%; text; margin-left: 25%" >
				<div class="form-group">
					<label for="name">设置三个用来预览的openid</label>
					<input type="input" class="form-control" 
							 ng-model="openid1"  />
					<input type="input" class="form-control" 
							 ng-model="openid2"  />
					<input type="input" class="form-control" 
							 ng-model="openid3"  />
				</div>
			</div>
		</div>
		
		<div class="panel panel-success" style="width:28%;float:left">
			<div class="panel-heading">
				<h3 class="panel-title">模板</h3>
			</div>
			<div class="panel-body" 
				 >
				
				<table class="table table-bordered table-hover" style="table-layout: fixed;">
				  <caption>模板使用记录</caption>
				  <thead>
				  	<colgroup>
					    <col></col>
					    <col></col>
					    <col></col>
					  </colgroup>
				    <tr>
				      <th>模板ID</th>
				      <th>模板名称</th>
				      <th>操作</th>
				    </tr>
				  </thead>
				  <tbody>
				     <tr class="{{outerIndex%2==0?'success':'danger'}}" ng-repeat="x in datas" ng-init="outerIndex = $index">
				    	
					    <td style="overflow: hidden; text-overflow:ellipsis;white-space: nowrap" title="{{ x.templateId }}">{{ x.templateId}}</td>
					    <td >{{ x.templateName }}</td>
					    <td><input type="checkbox" ng-click="selectTemplate( select.x.templateId,x.templateId,x.templateName,x.templateContent )" ng-model="select.x.templateId"/></td>
					  </tr>
				  </tbody>
			</table>
			</div>
		</div>
	</div>

	<script type="text/javascript">
Date.prototype.format = function(format)
{
 var o = {
 "M+" : this.getMonth()+1, //month
 "d+" : this.getDate(),    //day
 "h+" : this.getHours(),   //hour
 "m+" : this.getMinutes(), //minute
 "s+" : this.getSeconds(), //second
 "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
 "S" : this.getMilliseconds() //millisecond
 }
 if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
 (this.getFullYear()+"").substr(4 - RegExp.$1.length));
 for(var k in o)if(new RegExp("("+ k +")").test(format))
 format = format.replace(RegExp.$1,
 RegExp.$1.length==1 ? o[k] :
 ("00"+ o[k]).substr((""+ o[k]).length));
 return format;
}

function getQueryString(name) { 
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
	var r = window.location.search.substr(1).match(reg); 
	if (r != null) return unescape(r[2]); return null; 
	} 

	var app = angular.module('myApp', []);
	
	app.controller('myCtrl', function($scope,$http) {
		$scope.color="#000000";
		$scope.color1="#000000";
		$scope.color2="#000000";
		$scope.color3="#000000";
		$scope.color4="#000000";
		$scope.color5="#000000";
		$scope.color6="#000000";
		$scope.topcolor="#000000";
		$scope.clickurl="http://";
		$scope.startDate=new Date().format("yyyy-MM-dd")+"T00:00";
		var d=new Date(); 
		d.setDate(d.getDate()+5); 
		$scope.endDate=d.format("yyyy-MM-dd")+"T00:00";
		
		$scope.keyword1Label="keyword1";
		$scope.keyword2Label="keyword2";
		$scope.keyword3Label="keyword3";
		$scope.keyword4Label="keyword4";
		$scope.keyword5Label="keyword5";
		
		$scope.templateContentDemo="{{first.DATA}}投诉内容:{{keyword1.DATA}}联系方式:{{keyword2.DATA}}{{remark.DATA}}";
		
		$scope.submit = function() {
			if($scope.sendDate==undefined){
				alert("请选择发送时间");
				return;
			}
			if($scope.templateId==undefined){
				alert("请填写模板ID");
				return;
			}
			if($scope.clickurl==undefined){
				alert("请填写跳转URL");
				return;
			} 
			var data={
					first:{
						value:$scope.first,
						color:$scope.color
					},
					keyword1:{
						value:$scope.keyword1,
						color:$scope.color1
					},
					keyword2:{
						value:$scope.keyword2,
						color:$scope.color2
					},
					keyword3:{
						value:$scope.keyword3,
						color:$scope.color3
					},
					keyword4:{
						value:$scope.keyword4,
						color:$scope.color4
					},
					keyword5:{
						value:$scope.keyword5,
						color:$scope.color5
					},
					remark:{
						value:$scope.remark,
						color:$scope.color6
					},
					templateId:$scope.templateId,
					sendDate:$scope.sendDate.format("yyyy-MM-dd hh:mm"),
					note:$scope.note,
					clickurl:$scope.clickurl,
					topcolor:$scope.topcolor,
					createTime:$scope.createTime,
					openid:{
						openid1:$scope.openid1,
						openid2:$scope.openid2,
						openid3:$scope.openid3
					},
					id:$scope.id,
					templateName:$scope.templateName,
					templateContent:$scope.templateContent
			};
			
			data[$scope.keyword1Label]=data.keyword1;
			data[$scope.keyword2Label]=data.keyword2;
			data[$scope.keyword3Label]=data.keyword3;
			data[$scope.keyword4Label]=data.keyword4;
			data[$scope.keyword5Label]=data.keyword5;
			
			console.log(data);
			$http({url:'/add',method:'post',data:JSON.stringify(data),headers:{'Content-Type': 'application/json'}}).then(function successCallback(response) {
				console.log(response)
				if(response.data.code==200){
					location.href="datalist.html";
				}else{
					alert("新建消息失败");
				}
		    }, function errorCallback(response) {
		            // 请求失败执行代码
		    	console.log(response)
		    });
	    };
	    
	    $http({url:'/getOpenlist',method:'get'}).then(function successCallback(response) {
			console.log(response);
			$scope.openid1=response.data.openid1;
			$scope.openid2=response.data.openid2;
			$scope.openid3=response.data.openid3;
	    }, function errorCallback(response) {
	            // 请求失败执行代码
	    	console.log(response)
	    });
	    
	    
	    $http({url:'/getTemplateUse',method:'get'}).then(function successCallback(response) {
			console.log(response);
			$scope.datas=response.data;
	    }, function errorCallback(response) {
	            // 请求失败执行代码
	    	console.log(response)
	    });
	    
	    $scope.selectTemplate=function(isChecked,templateId,templateName,templateContent){
	    	if(isChecked){
	    		$scope.templateId=templateId;
	    		$scope.templateName=templateName;
	    		$scope.templateContent=templateContent;
	    		$scope.contentChange();
	    	}else{
	    		$scope.templateId="";
	    		$scope.templateName="";
	    		$scope.templateContent="";
	    	}
	    }
	    
	    $scope.contentChange=function(){
	    	console.log($scope.templateContent)
	    	if($scope.templateContent){
	    		var data={
	    				key:$scope.templateContent
	    		}
	    		
	    		$http({url:'/parseTemplate',method:'post',data:JSON.stringify(data),headers:{'Content-Type': 'application/json'}}).then(function successCallback(response) {
					console.log(response)
					if(response.data){
						for(var i in response.data){
							var s="$scope."+i+"Label='"+response.data[i]+"'";
							eval(s);
						}
					}
			    }, function errorCallback(response) {
			            // 请求失败执行代码
			    	console.log(response)
			    });
	    	}
	    }
	    
	    $scope.search = function() {
	    	if($scope.sendDate==undefined){
				alert("请选择发送时间");
				return;
			}
			if($scope.templateId==undefined){
				alert("请填写模板ID");
				return;
			}
			if($scope.clickurl==undefined){
				alert("请填写跳转URL");
				return;
			}
			var data={
					first:{
						value:$scope.first,
						color:$scope.color
					},
					keyword1:{
						value:$scope.keyword1,
						color:$scope.color1
					},
					keyword2:{
						value:$scope.keyword2,
						color:$scope.color2
					},
					keyword3:{
						value:$scope.keyword3,
						color:$scope.color3
					},
					keyword4:{
						value:$scope.keyword4,
						color:$scope.color4
					},
					keyword5:{
						value:$scope.keyword5,
						color:$scope.color5
					},
					remark:{
						value:$scope.remark,
						color:$scope.color6
					},
					templateId:$scope.templateId,
					sendDate:$scope.sendDate.format("yyyy-MM-dd hh:mm"),
					note:$scope.note,
					clickurl:$scope.clickurl,
					topcolor:$scope.topcolor,
					createTime:$scope.createTime,
					openid:{
						openid1:$scope.openid1,
						openid2:$scope.openid2,
						openid3:$scope.openid3
					}
			};
			
			data[$scope.keyword1Label]=data.keyword1;
			data[$scope.keyword2Label]=data.keyword2;
			data[$scope.keyword3Label]=data.keyword3;
			data[$scope.keyword4Label]=data.keyword4;
			data[$scope.keyword5Label]=data.keyword5;
			
			console.log(data)
			$http({url:'/search',method:'post',data:JSON.stringify(data),headers:{'Content-Type': 'application/json'}}).then(function successCallback(response) {
				console.log(response)
				if(response.data.code==200){
					alert("预览消息发送成功");
				}
		    }, function errorCallback(response) {
		            // 请求失败执行代码
		    	console.log(response)
		    });
	    }
	    
	    if(location.href.indexOf("?")!=-1){
	    	var id=getQueryString("id");
	    	var createDate=getQueryString("createDate");
	    	$http({url:'/getByTemplate?id='+id+"&createDate="+createDate,method:'get',headers:{'Content-Type': 'application/json'}}).then(function successCallback(response) {
				console.log(response);
				response.data.data=JSON.parse(response.data.data);
				$scope.first=response.data.data.first.value;
				$scope.color=response.data.data.first.color;
				$scope.keyword1=response.data.data.keyword1.value;
				$scope.color1=response.data.data.keyword1.color;
				$scope.keyword2=response.data.data.keyword2.value;
				$scope.color2=response.data.data.keyword2.color;
				$scope.keyword3=response.data.data.keyword3.value;
				$scope.color3=response.data.data.keyword3.color;
				$scope.keyword4=response.data.data.keyword4.value;
				$scope.color4=response.data.data.keyword4.color;
				$scope.keyword5=response.data.data.keyword5.value;
				$scope.color5=response.data.data.keyword5.color;
				$scope.remark=response.data.data.remark.value;
				$scope.color6=response.data.data.remark.color;
				$scope.templateId=response.data.templateId;
				var val=Date.parse(response.data.setSendTime);
				$scope.sendDate=new Date(val);
				$scope.note=response.data.note;
				$scope.clickurl=response.data.clickurl;
				$scope.topcolor=response.data.topcolor;
				$scope.createTime=response.data.createTime;
				$scope.id=response.data.id;
				$scope.templateName=response.data.templateName;
				$scope.templateContent=response.data.templateContent;
				
				$("#color").spectrum({
					showPaletteOnly: true,
				    togglePaletteOnly: true,
				    togglePaletteMoreText: '展开',
				    togglePaletteLessText: '收缩',
				    color: $scope.color||'black',
				    cancelText: "取消",
			        chooseText: "选择",
			        preferredFormat:true,
				    palette: [
				        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
				        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
				        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
				        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
				        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
				        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
				        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
				        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
				    ],
				    change:function(change, callbackContext){
				    	var scope=angular.element('#colorValue').scope();
				    	scope[this.id]=change.toHexString();
				    	$("#"+this.id+"Value").val(change.toHexString());
				    }
				});
				
				$("#topcolor").spectrum({
					showPaletteOnly: true,
				    togglePaletteOnly: true,
				    togglePaletteMoreText: '展开',
				    togglePaletteLessText: '收缩',
				    color: $scope.topcolor||'black',
				    cancelText: "取消",
			        chooseText: "选择",
			        preferredFormat:true,
				    palette: [
				        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
				        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
				        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
				        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
				        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
				        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
				        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
				        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
				    ],
				    change:function(change, callbackContext){
				    	var scope=angular.element('#topcolorValue').scope();
				    	scope[this.id]=change.toHexString();
				    	$("#"+this.id+"Value").val(change.toHexString());
				    }
				});
				
				for(var i=1;i<=6;i++){
					$("#color"+i).spectrum({
						showPaletteOnly: true,
					    togglePaletteOnly: true,
					    togglePaletteMoreText: '展开',
					    togglePaletteLessText: '收缩',
					    color: $scope["color"+i]||'black',
					    cancelText: "取消",
				        chooseText: "选择",
				        preferredFormat:true,
					    palette: [
					        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
					        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
					        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
					        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
					        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
					        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
					        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
					        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
					    ],
					    change:function(change, callbackContext){
					    	var scope=angular.element('#color1Value').scope();
					    	scope[this.id]=change.toHexString();
					    	$("#"+this.id+"Value").val(change.toHexString());
					    }
					});
				}
				
				$(".sp-replacer").addClass("form-control");
				$(".sp-replacer").css("width","20%");
				$("#topcolorForm").find(".sp-replacer").css("float","left");
				$scope.contentChange();
		    }, function errorCallback(response) {
		            // 请求失败执行代码
		    });
	    }else{
	    	$("#color").spectrum({
				showPaletteOnly: true,
			    togglePaletteOnly: true,
			    togglePaletteMoreText: '展开',
			    togglePaletteLessText: '收缩',
			    color: 'black',
			    cancelText: "取消",
		        chooseText: "选择",
		        preferredFormat:true,
			    palette: [
			        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
			        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
			        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
			        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
			        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
			        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
			        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
			        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
			    ],
			    change:function(change, callbackContext){
			    	var scope=angular.element('#colorValue').scope();
			    	scope[this.id]=change.toHexString();
			    	$("#"+this.id+"Value").val(change.toHexString());
			    }
			});
			
			$("#topcolor").spectrum({
				showPaletteOnly: true,
			    togglePaletteOnly: true,
			    togglePaletteMoreText: '展开',
			    togglePaletteLessText: '收缩',
			    color:'black',
			    cancelText: "取消",
		        chooseText: "选择",
		        preferredFormat:true,
			    palette: [
			        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
			        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
			        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
			        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
			        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
			        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
			        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
			        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
			    ],
			    change:function(change, callbackContext){
			    	var scope=angular.element('#topcolorValue').scope();
			    	scope[this.id]=change.toHexString();
			    	$("#"+this.id+"Value").val(change.toHexString());
			    }
			});
			
			for(var i=1;i<=6;i++){
				$("#color"+i).spectrum({
					showPaletteOnly: true,
				    togglePaletteOnly: true,
				    togglePaletteMoreText: '展开',
				    togglePaletteLessText: '收缩',
				    color: 'black',
				    cancelText: "取消",
			        chooseText: "选择",
			        preferredFormat:true,
				    palette: [
				        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
				        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
				        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
				        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
				        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
				        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
				        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
				        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
				    ],
				    change:function(change, callbackContext){
				    	var scope=angular.element('#color1Value').scope();
				    	scope[this.id]=change.toHexString();
				    	$("#"+this.id+"Value").val(change.toHexString());
				    }
				});
			}
			
			$(".sp-replacer").addClass("form-control");
			$(".sp-replacer").css("width","20%");
			$("#topcolorForm").find(".sp-replacer").css("float","left");
	    }
	    
	    $http.get('/getApp').then(function successCallback(response) {
  			console.log(response);
  			$scope.name=response.data.name;
        }, function errorCallback(response) {
            // 请求失败执行代码
            console.log(response)
    	});
	});
	
</script>
</body>
</html>